<template>
    <view style="width: 100%; position: relative;">
        <view class="book-card-item" @tap="watchBookDetail">
            <view class="book-img">
                <image mode="aspectFit"
                       :src="item.booksHead"/>
            </view>
            <view class="book-detail-wrapper">
                <view class="book-detail">
                    <view class="book-name ellipsis-one">{{item.booksName}}</view>
                    <view class="common-applicable-age ellipsis-one">
                        <text class="book-class-txt">{{item.sortNameLevel2 || '暂无分类'}}</text>
                        <text class="book-age-txt">{{item.booksMinAge}}-{{item.booksMaxAge}}岁</text>
                    </view>
                    <view class="book-author ellipsis-one">{{item.authorName || '暂无作者'}}</view>
                </view>
                <view class="user-action">
                    <image mode="aspectFit"
                           class="common-img-size btn-collection"
                           @tap.stop="collectHandle(item.keep ? 'delCollect' : 'addCollect')"
                           :src="http+(!item.keep?'wish2':'wish1')+'.png'"/>
                    <image mode="aspectFit"
                           class="common-img-size btn-shopping-car"
                           @tap.stop="shoppingCar(item.shopping ? 'delShopping' : 'addShopping')"
                           :src="http+(item.shopping?'shopping-active1':'shopping2')+'.png'"/>
                </view>
            </view>
        </view>
        <gw-user-login ref="userLogin" :modalType="modalType"/>
    </view>
</template>

<script>
    import { addShopOrCollect } from '@/util/commonFn'
    import gwUserLogin from '@/pages/components/gw-user-login'
    import { mapGetters } from 'vuex'
    export default {
        name: "gw-book-card",
        components: { gwUserLogin },
        props: {
            item: {
                defalut: () => {
                },
                type: Object
            }
        },
        data(){
            return{
                http: this.$https,
                modalType: 'login'
            }
        },
        computed: {
            ...mapGetters(['login', 'userInfo'])
        },
        mounted() {
        },
        methods: {
            collectHandle(type) {
                this.booksHandle(type, 'collect');
            },
            shoppingCar(type) {
                this.booksHandle(type, 'shopping');
            },
            booksHandle(type, name){
                if(!this.login){
                    this.$refs.userLogin.showModal = true;
                    return;
                }
                if(!!this.userInfo.status){
                    this.modalType = 'bindPhone';
                    this.$refs.userLogin.showModal = true;
                    return;
                }
                let that = this;
                addShopOrCollect(type, name, this.item.booksId).then(()=>{
                    that.$emit('updateBooks');
                })
            },
            watchBookDetail(){
                this.$emit('linkTo', this.item)
            },
        }
    }
</script>

<style scoped lang="scss">
    .book-card-item {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
        height: 210rpx;
        .user-action{
            position: relative;
            left: 0;
            bottom: 0;
        }
        .book-img {
            flex: 0 0 20px;
            box-shadow: .5px .5px .5px .5px rgba(0, 0, 0, 0.1);
            image {
                max-width: 280rpx;
                max-height: 210rpx;
                width:280rpx;
                height:210rpx;
                opacity:1;
                border-radius:4rpx;
            }
        }

        .book-detail-wrapper {
            position: relative;
            margin-left: 20rpx;
            flex-grow: 1;
            overflow: hidden;
            .book-detail {
                display: flex;
                flex-direction: column;
                height: 100%;
                overflow: hidden;
                .book-name{
                    font-size:28rpx;
                    font-weight:bold;
                    line-height:40rpx;
                    color:rgba(51,51,51,1);
                }
                .book-author{
                    font-size:24rpx;
                    line-height:33rpx;
                    color:rgba(153,153,153,1);
                }
            }

            .btn-collection, .btn-shopping-car {
                position: absolute;
                right: 0rpx;
                bottom: 0rpx;
                font-size: 40rpx;
                color: rgba(168,168,168,1);
            }

            .btn-collection {
                right: 66rpx;
            }
        }
    }
</style>